<template>
  <div class="forget-form">
    <p class="forget-form-logo">找回密码</p>
    <!-- <button @click="toggle">切换</button> -->
    <!-- 步骤滑动条 -->
    <div class="step-slider">
      <div data-index="1" class="step-slider-item active">
        <span>身份验证</span>
      </div>
      <div data-index="2" class="step-slider-item" :class="step>=1?'active':(back?'back':'')">
        <span>填写验证码</span>
      </div>
      <div data-index="3" class="step-slider-item" :class="step===2?'active':(back?'back':'')">
        <span>重置密码</span>
      </div>
    </div>
    <!-- 表单区 -->
    <div class="form-box">
      <transition mode="out-in" tag="div">
        <!-- 身份验证 -->
        <!-- 填写验证码 -->
        <!-- 重置密码 -->
        <component
          :is="component_form[step]"
          @prevStep="prevStep"
          @nextStep="nextStep"
          @backLogin="backLogin"
          @toStart="toStart"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import account from "@/components/Login/Form/account.vue";
import captcha from "@/components/Login/Form/captcha.vue";
import password from "@/components/Login/Form/password.vue";
export default {
  components: {
    account,
    captcha,
    password
  },
  data() {
    return {
      step: 0, //当前步骤序号
      back: false, //后退标志
      component_form: ["account", "captcha", "password"]
    };
  },
  watch: {
    /* 监视step是前进还是后退 */
    step(newValue, oldValue) {
      newValue > oldValue ? (this.back = false) : (this.back = true);
    }
  },
  methods: {
    /* toggle() {
      this.step = (this.step + 1) % 3;
    }, */
    prevStep() {
      //返回上一步 步骤序号-1
      this.step--;
    },
    nextStep() {
      //下一步 步骤序号+1
      this.step++;
    },
    //返回登录页
    backLogin() {
      this.$emit("backLogin");
    },
    //回到初始步骤
    toStart() {
      this.step = 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.forget-form {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 625px;
  padding: 10px 50px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 50px;
  border-radius: 3px;
  background-color: #fff;
  animation: forget-show 0.5s ease 0.2s forwards;
  .forget-form-logo {
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }
  .step-slider:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 8px;
    left: 0;
    background-color: #30adfa;
    border: 1px solid #ccc;
    border-radius: 50%;
    z-index: 1;
  }
  .step-slider {
    position: relative;
    height: 50px;
    .step-slider-item {
      width: 33.333%;
      height: 1px;
      position: relative;
      display: inline-block;
      background-color: #ccc;
      span {
        position: absolute;
        left: 50%;
        top: 6px;
        transform: translateX(-50%);
        color: #b0bec5;
        transition: all 0.5s ease-out;
      }
    }
    .step-slider-item:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 1px;
      background-color: #b0bec5;
      transition: all 0.5s ease-out;
    }
    .step-slider-item:after {
      content: "";
      width: 10px;
      height: 10px;
      position: absolute;
      top: -6px;
      right: 0;
      background-color: #fafafa;
      border: 1px solid #ccc;
      border-radius: 50%;
      transition: all 0.3s ease-out 0.5s;
    }
    .step-slider-item.back:after {
      transition: all 0.3s ease-out;
    }
    .step-slider-item.back:before {
      transition: all 0.5s ease-out 0.3s;
    }
    .step-slider-item.active span {
      color: #30adfa;
    }
    .step-slider-item.active:before {
      width: 100%;
      background-color: #30adfa;
    }
    .step-slider-item.active:after {
      background-color: #30adfa;
    }
  }
  .form-box {
    position: relative;
    max-height: 167px;
    overflow: hidden;
  }
}
@keyframes forget-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.2s ease;
}
</style>